{% extends "base.html" %}
{% load get_item %}
{% block header %}卡管理{% endblock %}
{% block content %}
<div class="card shadow-sm rounded p-4 mb-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">卡列表</h4>
        <div style="display:flex;gap:10px;">
            <a href="/add_card/" class="btn btn-success">添加新卡</a>
            <a href="/cards/import/" class="btn btn-info">导入卡</a>
            <a href="/cards/export/" class="btn btn-warning">导出卡</a>
            <form method="post" action="/cards/update/" style="display:inline;">
                {% csrf_token %}
                <button type="submit" class="btn btn-primary">更新</button>
            </form>
        </div>
    </div>
    <!-- 筛选表单 -->
    <form method="get" class="row g-2 mb-3 align-items-center flex-nowrap" style="flex-wrap:nowrap;">
        {% if user.is_superuser or user.profile and user.profile.type == 'admin' %}
        <div class="col-auto d-flex align-items-center" style="min-width:220px;">
            <label for="customer" class="form-label mb-0 me-2">客户</label>
            <select name="customer" id="customer" class="form-select" style="min-width:100px;">
                <option value="">全部</option>
                {% for c in customers %}
                    <option value="{{ c.id }}" {% if c.id|stringformat:'s' == selected_customer %}selected{% endif %}>{{ c.username }}</option>
                {% endfor %}
            </select>
        </div>
        {% endif %}
        <div class="col-auto d-flex align-items-center" style="min-width:260px;">
            <label for="iccid" class="form-label mb-0 me-2">ICCID</label>
            <input type="text" name="iccid" id="iccid" class="form-control" value="{{ selected_iccid }}" placeholder="模糊搜索ICCID" style="min-width:160px;">
        </div>
        <div class="col-auto d-flex align-items-center" style="min-width:180px;">
            <label for="cardStatus" class="form-label mb-0 me-2">卡状态</label>
            <select name="cardStatus" id="cardStatus" class="form-select" style="min-width:90px;">
                <option value="">全部</option>
                {% for k,v in card_status_cn.items %}
                    <option value="{{ k }}" {% if k == selected_card_status %}selected{% endif %}>{{ v }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-auto d-flex align-items-center" style="gap:6px;">
            <button type="submit" class="btn btn-primary">筛选</button>
            <a href="/cards/" class="btn btn-warning">重置</a>
        </div>
    </form>
    <div class="d-flex justify-content-between align-items-center mb-2">
        <div></div>
        <div>
            <span>共 <b>{{ page_obj.paginator.count }}</b> 条</span>
            <span style="margin-left:16px;">第 <b>{{ page_obj.number }}</b> / {{ page_obj.paginator.num_pages }} 页</span>
        </div>
    </div>
    <div style="display: flex; position: relative;">
        <!-- 左侧可滚动的表格内容 -->
        <div style="flex: 1; overflow-x: auto; overflow-y: hidden;">
            <table class="table table-bordered align-middle mb-0" style="white-space:nowrap; margin-bottom: 0;">
                <thead class="table-light">
                    <tr>
                        <th style="white-space:nowrap;">ICCID</th>
                        <th style="white-space:nowrap;">MSISDN</th>
                        {% if user.is_superuser or user.profile and user.profile.type == 'admin' %}
                        <th>绑定客户</th>
                        {% endif %}
                        <th style="white-space:nowrap;">是否实名</th>
                        <th style="white-space:nowrap;">IMSI</th>
                        <th style="white-space:nowrap;">卡类型</th>
                        <th style="white-space:nowrap;">卡状态</th>
                        <th style="white-space:nowrap;">运营商</th>
                        <th style="white-space:nowrap;">套餐名称</th>
                        <th style="white-space:nowrap;">总流量</th>
                        <th style="white-space:nowrap;">已用流量</th>
                        <th style="white-space:nowrap;">剩余流量</th>
                        <th style="white-space:nowrap;">激活时间</th>
                        <th style="white-space:nowrap;">套餐到期</th>
                    </tr>
                </thead>
                <tbody>
                    {% for card in page_obj %}
                    <tr style="white-space:nowrap;">
                        <td>{{ card.iccid }}</td>
                        <td>{{ card.msisdn }}</td>
                        {% if user.is_superuser or user.profile and user.profile.type == 'admin' %}
                        <td>
                            {% with rels=card.carduserrelation_set.all %}
                                {% if rels %}
                                    {% for rel in rels %}
                                        {{ rel.customer.username }}
                                    {% endfor %}
                                {% else %}无{% endif %}
                            {% endwith %}
                        </td>
                        {% endif %}
                        <td>{{ real_name_auth_cn|get_item:card.realNameStatus|default:card.realNameStatus }}</td>
                        <td>{{ card.imsi }}</td>
                        <td>{{ card_type_cn|get_item:card.cardType|default:card.cardType }}</td>
                        <td>{{ card_status_cn|get_item:card.cardStatus|default:card.cardStatus }}</td>
                        <td>{{ operator_cn|get_item:card.operator|default:card.operator }}</td>
                        <td>{{ card.packageName }}</td>
                        <td>{{ card.totalFlow }}</td>
                        <td>{{ card.cardFlow }}</td>
                        <td>{{ card.leftFlow }}</td>
                        <td>{{ card.activateTime }}</td>
                        <td>{{ card.packageTime }}</td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="13" class="text-center">暂无卡信息</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- 右侧固定的操作列 -->
        <div style="width: 200px; min-width: 200px; flex-shrink: 0;">
            <table class="table table-bordered align-middle mb-0" style="white-space:nowrap; border-left: 0; margin-bottom: 0;">
                <thead class="table-light">
                    <tr><th style="white-space:nowrap;text-align:center;border-left:0;">操作</th></tr>
                </thead>
                <tbody>
                    {% for card in page_obj %}
                    <tr>
                        <td style="white-space:nowrap;text-align:center;border-left:0;padding:7px 2px;">
                            <div style="display:flex;gap:5px;align-items:center;justify-content:center;">
                                <a hidden href="/edit_card/{{ card.id }}/" class="btn btn-sm btn-primary" style="width:50px;font-size:11px;padding:4px 2px;">编辑</a>
                                <a href="/delete_card/{{ card.id }}/" class="btn btn-sm btn-danger" style="width:50px;font-size:11px;padding:4px 2px;">删除</a>
                                {% if card.id in my_assigned_card_ids %}
                                    <a href="/unassign_card/{{ card.id }}/" class="btn btn-sm btn-warning" style="width:70px;font-size:11px;padding:4px 2px;">解除分配</a>
                                {% elif card.id not in all_assigned_card_ids %}
                                    <a href="/assign_card/{{ card.id }}/" class="btn btn-sm btn-success" style="width:50px;font-size:11px;padding:4px 2px;">分配</a>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr><td class="text-center" style="border-left:0;">暂无卡信息</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <!-- 分页控件：带筛选参数 -->
    <nav aria-label="Page navigation">
        <ul class="pagination">
            {% with params="iccid="|add:selected_iccid|add:"&cardStatus="|add:selected_card_status|add:"&customer="|add:selected_customer %}
            {% if page_obj.number > 1 %}
                <li class="page-item"><a class="page-link" href="?page=1&{{ params }}">首页</a></li>
            {% endif %}
            {% if page_obj.has_previous %}
                <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}&{{ params }}">上一页</a></li>
            {% endif %}
            {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                    <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                {% else %}
                    <li class="page-item"><a class="page-link" href="?page={{ num }}&{{ params }}">{{ num }}</a></li>
                {% endif %}
            {% endfor %}
            {% if page_obj.has_next %}
                <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}&{{ params }}">下一页</a></li>
            {% endif %}
            {% if page_obj.number < page_obj.paginator.num_pages %}
                <li class="page-item"><a class="page-link" href="?page={{ page_obj.paginator.num_pages }}&{{ params }}">末页</a></li>
            {% endif %}
            {% endwith %}
        </ul>
    </nav>
</div>
{% endblock %}
